<template>
  <router-link :to="`/${pathTo}`" class="item" active-class="selected">
    <Icon :iconName="iconName"/>
    <slot></slot>
  </router-link>

</template>

<script>
export default {
  name: "NavItem",
  props: ['pathTo', 'iconName'],
}
</script>

<style lang="scss" scoped>

.item {
  display: flex;
  flex-direction: column;
  font-size: 1em;
  flex: 1;
  justify-content: center;
  align-items: center;

  &.selected {
    background-color: #e5e5e5;
    color: #2c3e50;
  }
}


</style>